<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="drag.js"></script>
    <style>
        img {
            display: block;
            width: 100%;
            height: auto;
        }

        .drag {
            width: 150px;
            height: 150px;
        }

        /* .drag1,
        .drag2 {
            width: 150px;
            height: 150px;
        } */

        .handler {
            background: #333;
            color: #fff;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
        }

        /* 当点击拖动时，保证当前元素处于前端 */
        .drag.on {
            z-index: 9;
        }

        .line {
            box-sizing: border-box;
            position: absolute;
            z-index: -1;
            background-color: rgb(216, 216, 216);
            opacity: 0.5;
        }

        .zoom_right {
            cursor: e-resize;
            width: 5px;
            height: 100%;
            top: 0;
            right: 0;
            z-index: 1;
            background-color: transparent;
            position: absolute;
        }

        .zoom_rb {
            cursor: se-resize;
            width: 5px;
            height: 5px;
            right: 0;
            bottom: 0;
            z-index: 3;
            position: absolute;
            background-color: transparent;
        }

        .zoom_bottom {
            cursor: s-resize;
            width: 100%;
            height: 5px;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            background-color: transparent;
        }
    </style>
</head>

<body>
    <div class='help'>
        <pre></pre>
    </div>
    <div class='drag-box 1'>
        <div id="div1" class='drag 1'>
            <div  class="drag1"><img src="03.jpg"></div>
        </div>
        <div class='drag 2'>
            <div class="drag2"><img src="03.jpg"></div>
        </div>
        <div class="line line_x"></div>
        <div class="line line_y"></div>
    </div>
    <script>
        $(function () {
            $('.drag-box .drag').each(function (index) {
                $(this).myDrag({
                    parent: 'parent', //定义拖动不能超出的外框,拖动范围
                    randomPosition: false, //初始化随机位置
                    direction: 'all', //方向
                    handler: false, //把手
                    dragStart: (x, y) => {
                        // console.log("开始拖动了", x, y)
                    },
                    dragEnd: (x, y) => {
                        // console.log("停止拖动了!", x, y)
                    },
                    dragMove: (x, y) => {
                        // console.log("拖动中!", x, y)
                    }
                });
            });
        });
        // 栅格系统
        const GRAPGAP = 10 // 栅格间隔 16px
        const GRAPGAPNum = 5 // 栅格小块 5 
        const GRAPWIDTH = 880 // 栅格宽度
        const GRAPHEIGHT = 480 // 栅格高度
        $('.drag-box').css({
            width: GRAPWIDTH + 'px',
            height: GRAPHEIGHT + 'px',
            border: '1px solid gainsboro',
            position: 'relative'
        })
        const xLine = Math.floor(GRAPHEIGHT / GRAPGAP)
        const yLine = Math.floor(GRAPWIDTH / GRAPGAP)
        console.log(xLine, yLine);
        for (let i = 0; i < xLine; i++) {
            let xBoxHTML = `<div style="top:${GRAPGAP * i}px;width:${GRAPWIDTH}px;height:${1}px;opacity:${i % GRAPGAPNum ? 0.5 : 1};" class="line line_x"></div>`
            let xmodal = $(xBoxHTML)
            $('.drag-box').append(xmodal)
        }
        for (let j = 0; j < yLine; j++) {
            let yBoxHTML = `<div style="left:${GRAPGAP * j}px;width:${1}px;height:${GRAPHEIGHT}px;opacity:${j % GRAPGAPNum ? 0.5 : 1};" class="line line_x"></div>`
            let ymodal = $(yBoxHTML)
            $('.drag-box').append(ymodal)
        }
        drag(document.getElementById("div1"));
    function drag(obj)
    {
       obj.onmousedown = function(e){
           e = e||event;
           var dir = "";  //设置好方向
           var firstX = e.clientX;  //获取第一次点击的横坐标
           var firstY = e.clientY;   //获取第一次点击的纵坐标
           var width = obj.offsetWidth;  //获取到元素的宽度
           var height = obj.offsetHeight;  //获取到元素的高度
           var Left = obj.offsetLeft;   //获取到距离左边的距离
           var Top = obj.offsetTop;   //获取到距离上边的距离
           //下一步判断方向距离左边的距离+元素的宽度减去自己设定的宽度，只要点击的时候大于在这个区间，他就算右边
           if(firstX>Left+width-30)
           {
               dir = "right";
           }else if(firstX<Left+30)
           {
               dir = "left";
           }
           if(firstY>Top+height-30)
           {
               dir = "down";
           }else if(firstY<Top+30)
           {
               dir = "top";
           }
           //判断方向结束
           document.onmousemove = function(e){
               e = e||event;
               switch(dir)
               {
                   case "right":
                         obj.style["width"] = width+(e.clientX-firstX)+"px";
                        break;
                   case "left":
                       obj.style["width"] = width-(e.clientX-firstX)+"px";
                       obj.style["left"] = Left+(e.clientX-firstX)+"px";
                        break;
                   case "top":
                       obj.style["height"] = height-(e.clientY-firstY)+"px";
                       obj.style["top"] = Top+(e.clientY-firstY)+"px";
                       break;
                   case "down":
                       obj.style["height"] = height+(e.clientY-firstY)+"px";
                       break;
               }
           }
           obj.onmouseup = function(){
               document.onmousemove = null;
           }
           return false;
       }
    }
    </script>
    </script>
</body>

</html>